<template>
  <el-dialog :title="!dataForm.id ? '新增' : '商品抢购详情'" :close-on-click-modal="false" :visible.sync="visible">
    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="80px">
      <el-form-item label="抢购过期时间" prop="expirationTime">
        <!--<el-date-picker v-model="dataForm.expirationTime" placeholder="抢购过期时间" type="date"></el-date-picker>-->
        <div class="block">
          <el-date-picker v-model="dataForm.expirationTime" type="datetime" placeholder="选择日期时间" @change="change"
            value-format="yyyy-MM-ddThh:mm:ss"></el-date-picker>
        </div>
      </el-form-item>
      <el-form-item label="金额/人" prop="numberMoney">
        <el-input v-model.number="dataForm.numberMoney" placeholder="金额/人"></el-input>
      </el-form-item>
      <!-- <el-form-item label="订单id" prop="ordersId">
        <el-input v-model.number="dataForm.ordersId" placeholder="订单id"></el-input>
      </el-form-item> -->
      <el-form-item label="商品id">
        <el-select v-model="dataForm.productId" placeholder="商品id" prop="productId" @change="selectProduct($event)">
          <el-option v-for="item in goodsListItem" :label="item.productName" :key="item.id" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="商品规格" prop="productSkuId">
        <!-- <el-input v-model.number="dataForm.productSkuId" placeholder="商品规格id"></el-input> -->
        <el-select v-model="dataForm.productSkuId" placeholder="请选择" prop="productSkuId" key="el-select1">
          <el-option v-for="(item,index) in goodsSizeList.skuList" :label="getColumnValue(goodsSizeList.attrEntities, index)" :key="index" :value="item.id">
            <template slot-scope="scope">
              {{getColumnValue(goodsSizeList.attrEntities, index)}}
            </template>
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <el-table :data="dataForm.productSnapUpOrderDTOS" border style="width:80%;margin:0 auto;">
      <el-table-column prop="memberName" label="用户名"></el-table-column>
      <el-table-column prop="memberAddressId" label="用户地址"></el-table-column>
      <el-table-column prop="payMoney" label="支付金额"></el-table-column>
    </el-table>

    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()" v-if="!dataForm.id">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
  export default {
    data() {
      return {
        value: "",
        visible: false,
        dataForm: {
          id: 0,
          expirationTime: "",
          numberMoney: "",
          ordersId: "",
          productId: "",
          productSkuId: "",
          productSnapUpOrderDTOS: []
        },
        dataRule: {},
        pickerOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now();
          },
          shortcuts: [
            {
              text: "今天",
              onClick(picker) {
                picker.$emit("pick", new Date());
              }
            },
            {
              text: "昨天",
              onClick(picker) {
                const date = new Date();
                date.setTime(date.getTime() - 3600 * 1000 * 24);
                picker.$emit("pick", date);
              }
            },
            {
              text: "一周前",
              onClick(picker) {
                const date = new Date();
                date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                picker.$emit("pick", date);
              }
            }
          ]
        },
        goodsListItem: [],
        goodsSizeList: []
      };
    },
    methods: {
      init(id) {
        this.dataForm.id = id;
        this.visible = true;
        this.getgoodsListItem(0);
        if (id === undefined) {
          this.$nextTick(() => {
            this.$refs["dataForm"].resetFields();
          });
        } else {
          this.$http({
            url: this.$http.adornUrl(`/productSnapUp/get/${this.dataForm.id}`),
            method: "get",
            params: this.$http.adornParams()
          }).then(({ data }) => {

            if (data && data.status === 200) {
              this.dataForm.expirationTime = data.data.expirationTime;
              this.dataForm.numberMoney = data.data.numberMoney;
              // this.dataForm.ordersId = data.data.ordersId;
              this.dataForm.productId = data.data.productId;
              this.dataForm.productSkuId = data.data.productSkuId;

              this.dataForm.productSnapUpOrderDTOS = data.data.productSnapUpOrderDTOS;
            }
          });
        }

        // this.$nextTick(() => {
        //   this.$refs['dataForm'].resetFields()
        //   if (this.dataForm.id) {
        //
        //   }
        // })
      },
      // 表单提交
      dataFormSubmit() {
        this.$refs["dataForm"].validate(valid => {
          if (valid) {
            this.$http({
              url: this.$http.adornUrl(
                `/productSnapUp/${
                !this.dataForm.id ? "save" : "get/" + this.dataForm.id
                }`
              ),
              method: "post",
              data: this.$http.adornData({
                id: this.dataForm.id || undefined,
                expirationTime: this.dataForm.expirationTime,
                numberMoney: this.dataForm.numberMoney,
                ordersId: this.dataForm.ordersId,
                productId: this.dataForm.productId,
                productSkuId: this.dataForm.productSkuId
              })
            }).then(({ data }) => {
              if (data && data.status === 200) {
                this.$message({
                  message: "操作成功",
                  type: "success",
                  duration: 1500,
                  onClose: () => {
                    this.visible = false;
                    this.$emit("refreshDataList");
                  }
                });
              } else {
                this.$message.error(data.message);
              }
            });
          }
        });
      },
      change() {
        // 刷新form表单
        this.$forceUpdate();
      },
      getgoodsListItem(id) {
        if (id) {

          this.$http({
            url: this.$http.adornUrl(`/product/get/${id}`),
            method: 'get',
          }).then(({ data }) => {
            if (data && data.status === 200) {
              // this.goodsSizeList = data.data.skuList
              this.goodsSizeList = data.data;
            } else {
              this.goodsSizeList = []
              // 表单提示

            }
          })
        } else {
          this.$http({
            url: this.$http.adornUrl(`/product/list?limit=10000`),

            method: 'get',
          }).then(({ data }) => {
            if (data && data.status === 200) {
              this.goodsListItem = data.data.list
            } else {
              this.goodsListItem = []
            }
          })
        }

      },
      selectProduct(event) { //数据渲染
        this.getgoodsListItem(event);
      },
      getColumnValue(attribute, index) {
        if(attribute.length>2){
          return `${attribute[index * 2].attributeValue} ${attribute[(index * 2) + 1].attributeValue}`;
        }else{
          return `${attribute[index].attributeKey} ${attribute[index].attributeValue}`;
        }
      },
    }
  };
</script>